<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">

            <h:form id="form" enctype="multipart/form-data">
                <p:panel styleClass="withoutBorder" rendered="#{!managerLayout.desabilitarMapa() and managerMapaPatrimonio.connect}">
                    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" />
                </p:panel>

                <br/>
                <h3 class="title">Mapa patrimônio</h3>
                <p:growl id="messages" showDetail="false" autoUpdate="true" />

                <p:panel id="patrimonioPanel" styleClass="container_24 clearfix both withoutBorder">
                    <h4 class="title">Dados Gerais</h4>

                    <p:outputLabel value="Setor" styleClass="grid_3" for="setor" />
                    <div class="grid_8">
                        <p:selectOneMenu id="setor" panelStyle="width:150px;" converter="setorconverter"
                                         value="#{managerMapaPatrimonio.quadra.setor}" 
                                         required="true" >
                            <f:selectItem itemLabel="" itemValue="" />
                            <f:selectItems value="#{managerUtilitario.setor}"/>

                            <p:ajax update="@this, :form:map, :form:numero" listener="#{managerMapaPatrimonio.mapearSetor}" />
                        </p:selectOneMenu> 
                    </div>

                    <p:outputLabel value="Quadra" styleClass="grid_3" for="numero"/>
                    <div class="grid_8">
                        <p:selectOneMenu id="numero" panelStyle="width:150px;" converter="quadraconverter"
                                         value="#{managerMapaPatrimonio.quadra}" 
                                         required="true" >
                            <f:selectItem itemLabel="" itemValue="" />
                            <f:selectItems value="#{managerUtilitario.getQuadra(managerMapaPatrimonio.quadra.setor)}"/>

                            <p:ajax update=":form:map" listener="#{managerMapaPatrimonio.mapearQuadra}" />
                        </p:selectOneMenu> 
                    </div>

                    <div class="clear"/>

                </p:panel>

                <h4 class="title">Georreferenciamento</h4>

                <p:panel id="geoPanel" styleClass="container_24 clearfix withoutBorder">

                    <div class="container_24 clearfix">
                        <div class="grid_20">

                            <p:graphicImage styleClass="grid_3 markerImage"
                                            url="media/images/marker/imovel/municipal.png" />
                            <div class="grid_3 makerImagemLegenda"><h5>Municipal</h5></div>

                            <p:graphicImage styleClass="grid_3 markerImage"
                                            url="media/images/marker/imovel/estadual.png" />
                            <div class="grid_3 makerImagemLegenda"><h5>Estadual</h5></div>

                            <p:graphicImage styleClass="grid_3 markerImage"
                                            url="media/images/marker/imovel/uniao.png" />
                            <div class="grid_3 makerImagemLegenda"><h5>União</h5></div>

                            <p:graphicImage styleClass="grid_3 markerImage"
                                            url="media/images/marker/imovel/particular.png" />
                            <div class="grid_3 makerImagemLegenda"><h5>Particular</h5></div>

                            <p:graphicImage styleClass="grid_3 markerImage"
                                            url="media/images/marker/imovel/religioso.png" />
                            <div class="grid_3 makerImagemLegenda"><h5>Religioso</h5></div>

                        </div>
                    </div>

                    <div class="buttonAction">

                        <p:panel id="map" styleClass="container_24 clearfix">
                            <p:gmap id="mapa" center="#{managerMapaPatrimonio.centroMapa}" zoom="#{managerMapaPatrimonio.zoomLevelMapa}"
                                    rendered="#{!managerLayout.desabilitarMapa() and managerMapaPatrimonio.connect}" type="HYBRID" 
                                    style="width:97%;height:500px" model="#{managerMapaPatrimonio.mapModel}">

                                <p:ajax event="stateChange" listener="#{managerMapaPatrimonio.onStateChange}"/>
                                <p:ajax event="overlaySelect" listener="#{managerMapaPatrimonio.onMarkerSelect}" />

                                <p:gmapInfoWindow id="info" maxWidth="320">
                                    <p:outputPanel style="text-align: left; display: block; padding-bottom: 20px; min-width: 200px">

                                        <p:outputLabel value="Inscrição: #{managerUtilitario.inscricaoCadastral(managerMapaPatrimonio.imovel, true)}"/>
                                        <div class="clear"/>

                                        <p:outputLabel value="Quadra: #{managerMapaPatrimonio.quadra.numero}" style="margin-right: 20px"/>

                                        <p:outputLabel value="Setor: #{managerMapaPatrimonio.quadra.setor.numero}"/>
                                        <div class="clear"/>

                                        <p:outputLabel value="Proprietário(s): #{managerMapaPatrimonio.nomeProprietarios()}" 
                                                       rendered="#{!managerMapaPatrimonio.imovel.proprietarios.isEmpty()}"
                                                       style="white-space: pre-wrap;"/>

                                        <div style="float: right; margin-right: -10px; right: 0; position: absolute;" >
                                            <a href="visualizarimovel.xhtml?vImovel=#{managerMapaPatrimonio.imovel.id}" 
                                               alt="Visualizar" title="Visualizar" class="fa fa-search fa-lg acaorapida"/>
                                        </div>

                                    </p:outputPanel>
                                </p:gmapInfoWindow>
                            </p:gmap>

                            <p:outputLabel value="O Georreferenciamento foi desabilitado pois não foi possível estabelecer uma conexão com a Internet !"
                                           rendered="#{!managerLayout.desabilitarMapa() and !managerMapaPatrimonio.connect}"/>

                            <p:outputLabel value="O Georreferenciamento foi desabilitado pelo administrador do sistema !"
                                           rendered="#{managerLayout.desabilitarMapa()}"/>
                        </p:panel>
                    </div>
                </p:panel>

                <br/>
                <div class="buttonAction">
                    <p:button href="index.xhtml" value="Cancelar"  icon="ui-icon-trash" />
                </div >
            </h:form>

        </ui:define> 
    </ui:composition>

</html>
